<script lang="ts" setup>
    import { appWindow,LogicalSize } from '@tauri-apps/api/window';
    import { convertFileSrc } from '@tauri-apps/api/tauri';
    import { copyFile } from '@tauri-apps/api/fs'
    import { open } from '@tauri-apps/api/dialog'
    appWindow.setSize(new LogicalSize(0,0));
    appWindow.setResizable(false);
    appWindow.setIgnoreCursorEvents(false)
    // 选择图片 或者 轮播图片
    import { onMounted, ref } from 'vue'
    const image = ref<string>('/image/1.png');
    const width = ref<number>();
    const height = ref<number>();
    const addImage =async function(){
        let selected = await open({
            title:'选择图片',
            multiple:false,
            directory:false,
            filters:[{
                name:'Image',
                extensions:['png','jpg','jpeg','webp']
            }]
        });
        imgSet(selected as string);

    }

    const imgSet = function(selected:string){
        if(selected){
            image.value = convertFileSrc(selected as string);
        }
        let img = new Image()
        img.src = image.value as string
        img.onload = function(){
            appWindow.setSize(new LogicalSize(200,(img.height/img.width)*200));
        }
    }

    import rightMenu from '../components/rightMenu.vue';

    import {forbidSelect,windowPosition} from '../composables/common'
    forbidSelect();
    windowPosition();

    onMounted(()=>{
        imgSet('');
    })
</script>

<template>
    <div style="display: flex;align-items: center;justify-content: center;border-radius: 10px;">
        <img :src="image" class="img" >
    </div>
    <right-menu :br="'10px'">
        <!-- 选择图片 -->
        <div class="menuitem" @click="addImage">
            <img draggable="false" :src="'icon/imageadd.png'" alt="" class="menuimg">
        </div>
    </right-menu>
</template>

<style>
body{
    border-radius: 10px;
    opacity: 0.99;
    overflow: hidden;
}
.img{
    width: 100vw;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

.menuitem{
    width: 30px;
    height: 30px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.menuimg{
    width: 25px;
    height: 25px;
}
</style>